<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大疆无人机照片信息查看器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <!-- 添加JSZip依赖 -->
    <script src="./jszip.min.js"></script>

    <!-- 确保pptxgenjs在JSZip之后加载 -->
    <script src="./pptxgen.bundle.js"></script>
    <script>
      console.log("pptxgenjs加载完成", typeof PptxGenJS, PptxGenJS);
      if (typeof PptxGenJS === "undefined") {
        console.error("pptxgenjs加载失败");
      } else {
        console.log("PptxGenJS版本:", PptxGenJS.version);
        console.log("PptxGenJS构造函数:", typeof PptxGenJS, PptxGenJS);
        console.log(
          "PptxGenJS方法:",
          Object.keys(PptxGenJS).filter(
            (k) => typeof PptxGenJS[k] === "function"
          )
        );
      }
    </script>
    <script src="./exif.min.js"></script>
    <link rel="stylesheet" href="./ppt-generator.css" />
    <script src="./ppt-generator.js"></script>

    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#165DFF",
              secondary: "#0FC6C2",
              neutral: "#F5F7FA",
              dark: "#1D2129",
            },
            fontFamily: {
              inter: ["Inter", "sans-serif"],
            },
          },
        },
      };
    </script>

    <style type="text/tailwindcss">
      @layer utilities {
        .exif-item {
          border-radius: 0.5rem;
          overflow: hidden;
          box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
          transition: transform 0.2s;
        }
        .exif-item:hover {
          transform: translateY(-2px);
        }
        .spinner {
          border: 4px solid rgba(0, 0, 0, 0.1);
          border-left-color: #165dff;
          border-radius: 50%;
          width: 36px;
          height: 36px;
          animation: spin 1s linear infinite;
        }
        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }
      }
    </style>
  </head>
  <body class="bg-neutral font-inter text-dark min-h-screen flex flex-col">
    <header class="bg-white shadow-md py-4 px-6">
      <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-3">
          <i class="fa fa-camera text-primary text-2xl"></i>
          <h1 class="text-xl md:text-2xl font-bold text-primary">
            大疆无人机照片信息查看器
          </h1>
        </div>
        <div class="flex items-center space-x-4">
          <button
            id="folder-select-btn"
            class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 flex items-center"
          >
            <i class="fa fa-folder-open mr-2"></i>
            <span>选择文件夹</span>
          </button>
          <button
            id="ppt-download-btn"
            class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 flex items-center"
            disabled
          >
            <i class="fa fa-download mr-2"></i>
            <span>导出PPT</span>
          </button>
          <input
            type="file"
            id="folder-input"
            class="hidden"
            webkitdirectory=""
            directory=""
            multiple=""
          />
        </div>
      </div>
    </header>

    <main class="container mx-auto px-6 py-8 flex-grow">
      <section class="mb-8">
        <div class="bg-white rounded-xl shadow-lg p-6">
          <div id="loading-overlay" class="py-12 text-center hidden">
            <div class="spinner mx-auto mb-4"></div>
            <p class="text-gray-600">正在处理照片...</p>
          </div>

          <div id="empty-state" class="py-8 text-center">
            <i class="fa fa-folder-open-o text-3xl text-gray-300 mb-3"></i>
            <p class="text-gray-500">请选择一个文件夹开始</p>
          </div>

          <div id="results-container" class="hidden">
            <div id="photo-list" class="space-y-6"></div>
            <div
              id="loading-status"
              class="py-4 text-center text-gray-500 hidden"
            >
              <div id="loaded-text" class="hidden">已加载完所有照片</div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="bg-white border-t border-gray-200 py-4 mt-8">
      <div class="container mx-auto px-6 text-center text-gray-500 text-sm">
        <p id="copyright">
          © 大疆无人机照片信息查看器，此应用仅在本地处理照片及信息
        </p>
        <script>
          const now = new Date();
          const year = now.getFullYear();
          const month = now.getMonth() + 1;
          const day = now.getDate();
          document.getElementById(
            "copyright"
          ).textContent = `© ${year}年${month}月${day}日 大疆无人机照片信息查看器，此应用仅在本地处理照片及信息`;
        </script>
      </div>
    </footer>

    <!-- 修改模块加载顺序 -->
    <script src="./ppt-generator.js"></script>
    <script src="./cl.js"></script>
  </body>
</html>
